<!-- 编辑用户 -->
<template>
    <Dialog v-model="dialogShow" title="弹窗标题" @confirm="confirm" @close="close">
        <proForm ref="proFormRef" :formJson="formJson" v-model="formData">
            <template #test>
                <el-form-item label="指定插槽" prop="desc">
                    <el-input v-model="formData.desc" type="textarea" />
                </el-form-item>
            </template>
            <el-form-item label="默认插槽" prop="desc">
                <el-input v-model="formData.desc" type="textarea" />
            </el-form-item>
        </proForm>
        <template #footer>
            <el-button @click="confirm">确定</el-button>
            <el-button @click="close">取消</el-button>
        </template>
    </Dialog>
</template>

<script setup lang="jsx">
import { getUserGender } from "../api/test";
/**
    *@param fields fields字段配置说明
    *@param formItem el-form-item 配置项
    *@param props 输入、选择框 配置项
    *@param label el-form-item 的label prop 会自动采用对象的key名
    *@param el element Plus的组件 也可以使用render自定义
    *@param render vue Render渲染 如果使用jsx 需要在script 标签上写上 lang="jsx"
    *@param options 组件选项枚举
    *@param fieldNames 修改枚举中默认取值的字段
    *@param on 事件监听 组件联动时 通过修改 formJson.fields[key]的值实现
    *@param solt 具名插槽
    *@param span 布局所占比例 最大24 与element plus Layout一致
    *@param offset 位置偏移
*/
import api from "../api";
const dialogShow = ref(false);

const roleEnum = [
    {
        label: "管理员",
        value: "admin",
    },
    {
        label: "dev",
        value: "开发",
    },
]

const formJson = reactive({
    // 表单整体配置项
    config: {
        labelWidth: "120px",
    },
    rules: {
        userName: [{ required: true, message: "请输入", trigger: "blur" }],
        nickName: [{ required: true, message: "请输入", trigger: "blur" }],
        orgId: [{ required: true, message: "请输入", trigger: "change" }],
        gender: [{ required: true, message: "请输入", trigger: "change" }],
        desc: [{ required: true, message: "请输入", trigger: "blur" }],
    },
    fields: {
        username: {
            label: "用户名称",   // el-form-item组件上的 label，prop 会自动采用对象的key名
            el: "input",        // el代表element Plus的组件 也可以使用render自定义
            props: {            // 表单组件的props 可以使用所有el组件的Attributes
                // placeholder: '',  //  不传时 会自动拼写 请输入${label} 请选择${label}
            },
        },
        nickName: {
            label: "昵称",
            render: ({ modelValue }) => { //render 如果使用jsx 需要在script 标签上写上 lang="jsx"
                return (
                     <><el-input v-model={formData.value.nickName} placeholder="请输入昵称" /></>
                )
            },
        },
        gender: {
            label: "性别",
            el: "radio-group",
            enum: getUserGender,      // 数据枚举
            fieldNames: {       // 修改枚举中默认取值的字段 
                label: 'key',
                value: 'val'
            },
            on: {              // 事件监听 组件联动时 通过修改 formJson.fields[key]的值实现
                change: (v) => {
                    formJson.fields.orgId.props.disabled = !formJson.fields.orgId.props.disabled;
                },
            },
        },
        soltTest: {
            solt: 'test',        // 具名插槽
            span: 12,
            offset: 5
        },
        role: {
            span: 12,
            label: "角色",
            el: "select",
            props: {},
            options: roleEnum,
        },
        orgId: {
            label: "组织",
            formItem: {
                width: "80px",
            },
            el: "cascader",
            props: {},
            options: [],
        }
    },
});
const formData = ref({
    username: "",
    nickName: "",
    gender: "",
    orgId: "",
    sorta: 0
});

const proFormRef = ref();

const show = () => {
    dialogShow.value = true;

    // 模仿异步获取数据
    getUserInfo();
    getOrgData();
};

const getUserInfo = (id) => {
    api.get(`https://mock.mengxuegu.com/mock/66eba4df90f5322f879d8359/api/query/userInfo`)
        .then((res) => {
            Object.assign(formData.value, res);
        });
};

const getOrgData = () => {
    api.get(`https://mock.mengxuegu.com/mock/66eba4df90f5322f879d8359/api/query/org`)
        .then((res) => {
            formJson.fields.orgId.options = res;
        });
};
const confirm = () => {
    proFormRef.value.validate((valid, fields) => {
        if (valid) {
            console.log(formData.value);
            emit("updata");
            close();
        } else {
            console.log(fields)
        }
    })
};

const close = () => {
    proFormRef.value.resetFields();
    dialogShow.value = false;
    console.log(formData.value);
};

const emit = defineEmits(["updata"]);
defineExpose({ show });
</script>
<style lang="scss" scoped></style>
